<template>
  <div class="leftBottom">
    <div class="title">
      <div class="title_box">
        <p>学校名称</p>
        <p>学校类型</p>
        <p>学校数量</p>
        <p>近视率</p>
      </div>
    </div>
    <vue-seamless-scroll :data="listData" :class-option="option" class="seamless-warp">
      <div class="swiperBox" v-for="(item,index) in listData" :key="index">
        <p class="itemBox">{{item.a}}</p> 
        <p class="itemBox">{{item.b}}</p> 
        <p class="itemBox">{{item.c}}</p> 
        <p class="itemBox">{{item.d}}</p> 
      </div>
    </vue-seamless-scroll>
  </div>
</template>
<script>
// import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: 'leftBottom',
  components: {
    // vueSeamlessScroll
  },
  data() {
    return {
      option:{
        step: 0.2
      },
      listData: [
        {
          a: "学校",
          b: "小学",
          c: "100",
          d: "50%"
        },
        {
          a: "学校",
          b: "da学",
          c: "100",
          d: "50%"
        },
        {
          a: "学校",
          b: "小学",
          c: "100",
          d: "34%"
        },{
          a: "学校",
          b: "小学",
          c: "100",
          d: "10%"
        },
        {
          a: "学校",
          b: "小学",
          c: "100",
          d: "80%"
        },
        {
          a: "学校",
          b: "小学",
          c: "100",
          d: "590%"
        },
      ]
    };
  },
  methods: {}
};
</script>
<style scoped>
div,
h1,
h2,
h3,
p,
img {
  padding: 0;
  margin: 0;
}
.leftBottom {
  width: 540px;
  height: 280px;
  margin-top: 20px;
  background: url("../assets/left_bottom.png") no-repeat;
  background-size: 100% 100%;
}
.title {
  width: 100%;
  height: 50px;
}
.title_box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.title_box p {
  width: 25%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 14px;
}

.seamless-warp {
  width: 99%;
  height: 227px;
  overflow: hidden;
  margin: 0 auto;
}
.swiperBox{
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-between;
}
.itemBox{
  width: 25%;
  height: 35px;
  text-align: center;
  line-height: 35px;
  color: #fff;
}
.swiperBox:nth-child(even) {
  background: #022546;
}
</style>